<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件绑定</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<!--
   v-on:事件名 =  回调函数  vue实现事件绑定的基本语法

   事件绑定的简化     v-on:事件名  ->  @事件名
-->
<div id="app">
    <h1>{{info}}</h1>
    <h1>{{age}}</h1>
    <!--    按钮绑定单击事件-->
    <button v-on:click="msg">单击1</button>
    <button v-on:dblclick="msg">双击1</button>

    <button v-on:click="msg2('单击')">单击2</button>
    <button v-on:dblclick="msg2('双击')">双击2</button>

    <button @click="msg2('单击')">单击3</button>
    <button @dblclick="msg2('双击')">双击3</button>


    <button @click="addAge">age+1</button>
</div>

<script type="text/javascript">

    const vm = new Vue({
        el: '#app',
        data: {
            info: 'vue事件的绑定',
            age: 20
        },
        methods: {

            msg() {
                console.log("hello vue")
            },
            msg2(info) {    // 有参数的函数  调用时没有传递参数 会默认将事件对象作为参数进行传入
                // console.log(info.target)
                console.log(info)
            },
            addAge(){
                // 判定 this是不是 vm 实例对象  vm在创建时  会将data中的属性进行数据代理
                // 数据代理  将data中有的属性  在vm实例上添加对应的属性  vm实例上添加属性 是代理的data中的属性
                // console.log(this==vm)
                // console.log(this)
                this.age++

            }
        }
    })
</script>
</body>
</html>
